import Title from "@/components/Title";
import { useEffect, RefObject, createRef } from "react";
import { useRef, useState } from "react";

const datas = [
    {
        title: "全域精准引流",
        desc: "全面覆盖，精准锁定，目标客户尽在掌握",
        details: [
            {
                title: "精准触达策略",
                desc: "运用数字员工的高级运营规则，针对目标受众在评论区、私信及直播间执行精准引流",
            },
            {
                title: "行业战术截流",
                desc: "数字员工实施精准搜索策略，主动在同行业账号的评论区发布截流信息",
            },
            {
                title: "达人合作引流",
                desc: "构建广泛的达人资源库，协助商家与达人一键建立联系，通过内容创作实现引流与转化",
            },
        ],
    },
    {
        title: "SCRM智能管理",
        desc: "策略部署智能化，客户关系深化，留存率飙升",
        details: [
            {
                title: "裂变式增长",
                desc: "多套裂变策略并行，激励老客户邀请新客户，私域流量池持续扩张",
            },
            {
                title: "留存率优化",
                desc: "标签化管理私域成员，大数据分析构建个性化档案，价值赋予提升留存",
            },
            {
                title: "智能高效运营",
                desc: "利用SCRM系统，一键发布社群内容，定向推送个性化信息，实现高效管理",
            },
        ],
    },
    {
        title: "转化效能提升",
        desc: "优化转化链路，促进复购，客户价值最大化",
        details: [
            {
                title: "智能路径优化",
                desc: "依据用户画像与行为数据，智能分析并优化转化路径，提升转化率",
            },
            {
                title: "个性化转化方案",
                desc: "提供多样化转化模型，定制专属转化策略，系统化提升转化效果",
            },
            {
                title: "复购激励策略",
                desc: "数字员工根据用户购买历史与偏好，智能推荐产品与优惠，激发复购热情",
            },
        ],
    },
];

const TabPanels = () => {
    const [active, setActive] = useState(0);
    const listRef = useRef<RefObject<HTMLDivElement>[]>([]);
    const [offsetLeft, setOffsetLeft] = useState(0);

    useEffect(() => {
        // 计算选中条偏移量
        const selectedEl = listRef.current[active]?.current;
        if (selectedEl) {
            setOffsetLeft(
                selectedEl.offsetLeft + (selectedEl.clientWidth - 240) / 2
            );
        }
    }, [active, listRef]);

    return (
        <div className="max-w-7xl w-full phone:px-6 flex flex-col items-center gap-5">
            <div
                className={`flex shrink-0 w-full items-start justify-center relative mb-12`}
            >
                {datas.map((item, index) => {
                    const element = createRef<HTMLDivElement>();
                    listRef.current[index] = element;
                    return (
                        <div
                            className="grow relative z-10 cursor-pointer flex flex-col items-center py-4 phone:py-10 border-b-font-blue border-b"
                            key={index}
                            ref={element}
                            onClick={() => setActive(index)}
                        >
                            <div
                                className={`hidden phone:block h-60 w-60 bg-contain bg-center bg-no-repeat ${
                                    active === index
                                        ? 'bg-[url("/siyuzhiying/icon-selected.png")]'
                                        : ""
                                }`}
                            >
                                <img src={`/siyuzhiying/icon-${index}.png`} />
                            </div>
                            <div className="text-base phone:text-xl mb-3 font-medium text-font-blue-300">
                                {item.title}
                            </div>
                            <div className="text-font-blue-200 text-xs hidden phone:block">
                                {item.desc}
                            </div>
                        </div>
                    );
                })}
                <div
                    className="absolute z-10 bottom-0 border-b-blue border-b-[5px] w-60 transition-[left]"
                    style={{ left: offsetLeft + "px" }}
                ></div>
            </div>
            <div
                className={`grow w-full grid grid-cols-1 gap-12 phone:grid-cols-3 phone:gap-6`}
            >
                {datas[active].details.map((item, index) => (
                    <div
                        key={index}
                        className={`flex phone:flex-col phone:items-center gap-3 px-6`}
                    >
                        <img
                            className="object-scale-down w-20 phone:w-fill phone:h-16"
                            src={`/siyuzhiying/icon-${active}-${index}.png`}
                            alt=""
                        />
                        <div className="flex flex-col phone:items-center">
                            <p className="">{item.title}</p>
                            <p className="text-xs leading-6 phone:text-center text-font-blue-100">
                                {item.desc}
                            </p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

const Siyuzhiying = () => {
    return (
        <div className="pb-10 phone:pb-[10rem] overflow-hidden flex flex-col items-center bg-gradient-to-b from-white to-[#F7F9FF]">
            <Title desc="数字员工赋能，挖掘增长潜能，全面优化私域生态">
                私域智营——私域增长领航者
            </Title>
            <TabPanels />
        </div>
    );
};

export default Siyuzhiying;
